import React, { useEffect,useState } from 'react';
import {Modal,Transfer} from 'antd';
 
const SelectRoleModal = (props)=>{
    const {visible,current,roles,handleCancel,handleSelect,dispatch} = props;
    const [targetKeys, setTargetKeys] = useState([]);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [roleDataSource, setRoleDataSource] = useState([{roleId:'1',roleName:'管理员'},{roleId:'2',roleName:'普通员工'}]);

    useEffect(() => {
        
    }, [visible]);

    const handleChange = (nextTargetKeys, direction, moveKeys) => {
        setTargetKeys(nextTargetKeys);
    
        // console.log('targetKeys: ', nextTargetKeys);
        // console.log('direction: ', direction);
        // console.log('moveKeys: ', moveKeys);
      };
    
    const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
        setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
    
        // console.log('sourceSelectedKeys: ', sourceSelectedKeys);
        // console.log('targetSelectedKeys: ', targetSelectedKeys);
      };
    
    const handleOk =()=>{
        let roles = targetKeys.map((key)=>{
          let find =  roleDataSource.filter((item)=>(item.roleId===key));
            if(find && find.length > 0){
                return find[0];
            }

        });

        handleSelect(roles);
    }
    return (
        <Modal
            title="选择系统权限"
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
        >
            <Transfer
                dataSource={roleDataSource}
                titles={['选择角色', '已有角色']}
                targetKeys={targetKeys}
                selectedKeys={selectedKeys}
                onChange={handleChange}
                onSelectChange={handleSelectChange}
                render={item => item.roleName}
                rowKey={item=>item.roleId}
                style={{ marginBottom: 16 }}
            />
        </Modal>
    );
}

export default SelectRoleModal;